import { Theme } from "fish-ui-yy";
import React from "react";
import { useStyles } from "./useStyles.styles";
/**
 * FishProvider组件主要接收主题样式，并且向下传递，因为ThemeContext.Provider组件没有实际的标签，所以要包裹一层div，将样式和主题作用到div上
 */
// 1. 创建一个context
type ThemeContextValue = Theme | Partial<Theme> | undefined;
const ThemeContext = React.createContext<ThemeContextValue>(undefined);

// 2. 创建一个provider
export type FishProviderProps = React.HTMLAttributes<
  React.ChildContextProvider<ThemeContextValue>
> & {
  theme: ThemeContextValue;
};
export const FishProvider = ({theme,className,children,...restprops}:FishProviderProps) => {
    const cls = useStyles({className,theme})
    return (
     <ThemeContext.Provider value={theme} {...restprops}>
        <div className={cls}>{children}</div>
     </ThemeContext.Provider>
    );
  };
  